<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据变化线型图</title>
    <link rel="stylesheet" type="text/css" media="screen" href="function/style/style.css"/>
    <script src="package/Chart.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="chart/node_modules/chart.js/auto/auto.js" type="node_modules"></script>
    <script src="function/drawline.js" type="text/javascript"></script>

</head>
<body>
    <table id="interface"  class="block">
        <thead>
            <tr>
                <td>FPS</td>
                <td>Memory Usage</td>
                <td>Temperature</td>
                <td>vmSize</td>
                <td>Battery</td>
            </tr>
        </thead>
        <tbody id="newblock">

        </tbody>
    </table>
    <div class="canvas">
        <canvas id="fps"></canvas>
        <canvas id="memory_usage"></canvas>
        <canvas id="temperature"></canvas>
        <canvas id="vmSize"></canvas>
        <canvas id="battery"></canvas>
    </div>
    <script>
        var loc = location.href;
        var n1 = loc.length;
        var n2 = loc.indexOf('=');
        var txt = decodeURI(loc.substr(n2+1,n1-n2));
        var max=[];
        var min=[];
        var med=[];
        var avg=[];
        $.ajax({
            url:"http://10.11.176.109:8000/case_total_data/"+txt,
            data:{},
            type:'GET',
            dataType:'json',
            jsonp:'jsonpCallback',
            success:function(data){
                let i=0;
                for(var key in data["data"]){
                    max[i]=data["data"][key].max_value;//max
                    med[i]=data["data"][key].med_value;//med
                    avg[i]=data["data"][key].avg_value;//avg
                    min[i]=data["data"][key].min_value;//min
                    i++;
                }
                var tr=document.createElement("tr");
            
                for(var n=0;n<i;n++)
                {
                    let num1=Math.floor(max[n]*100)/100;
                    let num2=Math.floor(med[n]*100)/100;
                    let num3=Math.floor(avg[n]*100)/100;
                    // let num1=max[n];
                    // let num2=med[n];
                    // let num3=avg[n];
                    var td=document.createElement("td");
                    var div1=document.createElement("div");
                    var div2=document.createElement("div");
                    var div3=document.createElement("div");
                    var txtmax=document.createTextNode("Max:"+num1);
                    var txtmed=document.createTextNode("Median:"+num2);
                    var txtavg=document.createTextNode("Average:"+num3);
                    div1.appendChild(txtmax);
                    div2.appendChild(txtmed);
                    div3.appendChild(txtavg);
                    td.appendChild(div1);
                    td.appendChild(div2);
                    td.appendChild(div3);
                    tr.appendChild(td);
                }
                var line=document.getElementById("newblock");
                line.appendChild(tr);
            }
        });
        $.ajax({
            url:"http://10.11.176.109:8000/case_data/"+txt,//DefaultGame-1629277255
            // url:"test.json",
            data:{},
            dataType:'json',
            type:'GET',
            success:function(data){
                // console.log(JSON.stringify(data));
                drawline(data,max,min);
            }
        });
    </script>
</body>
</html>